<template>
<div class="item"  @click="f1">
  
    <slot name="a1" v-if="q1"></slot>
    <slot name="a11" v-else></slot>
    <div :style="aj"><slot name="a2"></slot></div>
     <!-- <div><img src="..\..\assets\img\icon1.png" ></div>
      首页
    </div> -->
    <!-- <div class="tabbar-item">
      <div><img src="..\..\assets\img\icon2.png" ></div>
      关于
    </div>
    <div class="tabbar-item">
      <div><img src="..\..\assets\img\icon3.png" ></div>
      朋友圈
    </div>
    <div class="tabbar-item">
      <div><img src="..\..\assets\img\icon4.png" ></div>
      我的
    </div> -->
</div>
</template>

<script>
export default {
  name:'item',
  data(){
    return{
      
    }
  },
  methods:{
    f1(){
      this.$router.replace(this.path)
    }
  },
  props:{
    path:{
      type:String
    },
    color:{
      type:String,
      default:'red'
    }
  },
  computed:{
    aj(){
      return this.q1?{color:this.color}:{}
    },
    q1(){
      return this.$route.path.indexOf(this.path)!==-1
    }
  }

}
</script>

<style>
.item{
    text-align: center;
    flex: 1;
}

.item img{
  width: 24px;
  height: 24px;
}

</style>